<template>
    <!-- 如果推荐列表有数据才显示 -->
	<scroll-view @scrolltolower='scrolltolower' class="recommend_view" scroll-y v-if="recommends.length > 0">
        <!-- 推荐 -->
       <view class="tj_wrap">
        <navigator 
          class="tj_item"
          v-for="item in recommends"
          :key="item.id"
          :url="`/pages/album/index?id=${item.target}`"
          >
          <image mode="widthFix" :src="item.thumb"></image>
          </navigator>   
       </view> 
       <!-- 时间 -->
       <view class="moneths_wrap">
           <view class="moneths_title">
               <view class="title_left">
                   <view class="left_sj">
                       <text>{{moneths.DD}} /</text>
                       {{moneths.MM}}月
                   </view>
                   <view class="left_text">
                       你负责美丽就好
                   </view>
               </view>
               <view class="title_right">
                      更多 >
               </view>
           </view>
           <view class="moneths_content">
               <view class="moneths_item"
                v-for="(item,i) in moneths.items"
                :key='item.id'
               >
               <godetail :list='moneths.items' :i='i'>
                    <!-- replace(替换的，替换成) -->
                    <image mode="aspectFill" :src="item.thumb+item.rule.replace('$<Height>',360)"></image>
               </godetail>
               </view>
           </view>
       </view>
       <!-- 热门 -->
       <view class="hot_wrap">
          <view class="hot_title">
              <view class="title_l"></view>
              <view class="title_text">热门</view>
          </view>
          <view class="hot_content">
              <view 
              class="hot_img"
              v-for="(item,i) in hot"
              :key='item.id'
              >
               <godetail :list='hot' :i='i' >
                 <image mode="widthFix" :src="item.thumb"></image>
               </godetail>
              </view>
          </view>
       </view>
	</scroll-view>
</template>

<script>
//import {uniBadge} from '@dcloudio/uni-ui'
import godetail from '@/components/goDetail'
import moment from 'moment'
	export default {
        name:'homeRecommend',
		components: {
			godetail
		},
		data() {
			return {
				//推荐列表
                recommends:[],
                //日期
                moneths:{},
                //热门
                hot:[],
                //分页参数
                data:{
				   limit:30,    //每次获取调试
				   order:"hot", //hot默认参数表示热门
				   skip:0      //跳过几条
			   },
               //默认有数据
                isdata:true
			}
		},
        mounted(){
          uni.setNavigationBarTitle({title:'首页'})	
          this.getRecommends()
        },
		methods: {
            /**推荐列表请求 */
          getRecommends(){
            this.request({
			   url:"/api/v3/homepage/vertical",
			   method:"get",
			   data:this.data
		   }).then((res)=>{
               /**判断还有没有下一页数据 */
                if(res.data.res.vertical.length === 0){
                       wx.showLoading({title: '到底了亲！'})
                    setTimeout(()=>{
                       wx.hideLoading()
                    },1000)
                   this.isdata = false
                   return
                }
               /**没有推荐列表才请求 */
               if(this.recommends.length === 0){
               console.log(res)
               /**推荐列表 */
               this.recommends = res.data.res.homepage[1].items
               /**日期 */
               this.moneths = res.data.res.homepage[2]
               //时间搓转时间
               this.moneths.MM = moment(this.moneths.stime).format("MM");
               this.moneths.DD = moment(this.moneths.stime).format("DD");
               }
               /**热门 */
               //this.hot = res.data.res.vertical
               /**把上一次数据的值和下一次的拼接在一起 */
               this.hot = [...this.hot,...res.data.res.vertical]
		   })
          },
          /**滚动条触底事件 */
          scrolltolower(){
              /**判断还有没有数据 */
             if(this.isdata){
                //滚动条到底就跳过之前的30条数据
                this.data.skip += this.data.limit
                //然后重新请求
                this.getRecommends()
             } 
          }
		}
	}
</script>

<style lang="scss" scoped>
// 推荐
    .tj_wrap{
        display: flex;
        flex-wrap: wrap;
       .tj_item{
         width: 50vw;
         border: 5rpx solid white;
       } 
    }
// 时间    
    .moneths_wrap{
       .moneths_title{
           display: flex;
           color: $color;
           padding: 20rpx;
           font-size: 30rpx;
           justify-content: space-between;
           align-items: center;
           .title_left{
               display: flex;
               align-items: center;
               .left_sj{
                   font-size: 30rpx;
                   font-weight: bold;
                   text{
                    font-size: 36rpx;
                   }
               }
               .left_text{
                   color: #666;
                   margin-left: 30rpx;
               }
           }
        //    .title_right{
             
        //    }
       } 
       .moneths_content{
           display: flex;
           flex-wrap: wrap;
           .moneths_item{
               width: 33.33vw;
               border: 1px solid white;
           }
       }
    }
// 热门    
    .hot_wrap{
      .hot_title{
          display: flex;
          padding: 20rpx;
          align-items: center;
        .title_l{
            width: 6rpx;
            height: 30rpx;
            background: $color;
        }
        .title_text{
            font-size: 30rpx;
            font-weight: bold;
            margin-left: 20rpx;
        }  
      }  
      .hot_content{
          display: flex;
          flex-wrap: wrap;
          .hot_img{
              width: 33.33vw;
              border: 4rpx solid white;
          }
      }  
    }
   
    .recommend_view{
       //滚动得有个固定的高度calc可以用来计算
       height:calc(100vh - 64rpx);
    }
</style>
